import { PageContainer } from '@ant-design/pro-layout';
import { Button, Table } from 'antd';
import { ColumnsType } from 'antd/es/table/interface';
import React, { useEffect } from 'react';
import { connect, ConnectProps } from 'umi';
import EditForm from './components/EditForm';
import TabsBasic from './TabsBasic';
interface FilmCategoryProps extends ConnectProps {
  category: any;
}

const FilmCategory: React.FC<FilmCategoryProps> = (props) => {
  const { dispatch } = props;
  useEffect(() => {
    dispatch!({
      type: 'FilmCategory/loadData',
      payload: {},
    });
  }, []);
  const columns: ColumnsType<object> = [
    {
      title: '序号',
      dataIndex: 'name',
      key: 'name',
      render: (t: any, r: any, i: number) => i + 1,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '简介',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '图片',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作',
      dataIndex: 'name',
      key: 'name',
    },
  ];
  return (
    <PageContainer
      extra={
        <>
          <Button
            type="primary"
            onClick={() =>
              dispatch!({
                type: 'FilmCategory/save',
                payload: {
                  showEdit: true,
                },
              })
            }
          >
            add
          </Button>
          <Button type="primary">refresh</Button>
        </>
      }
    >
      <TabsBasic />
      <Table columns={columns} />
      <EditForm></EditForm>
    </PageContainer>
  );
};

export default connect((state: any) => {
  return {
    category: state.FilmCategory,
  };
})(FilmCategory);
